Repository navigation
Conversation
- Add Airtable-style paste expansion dialog - Fix onRowAdd to use functional setState for correct ID generation - Fix onDataUpdate to handle newly added rows - Add polling mechanism to wait for table state updates - Support copying focused cells and pasting with automatic row creation - Show toast notifications for copy and paste operations
- Add React.memo with custom comparison function like other grid components - Update registry.json to include data-grid-paste-dialog component - Add dialog to registryDependencies for data-grid component - Re-enable enablePaste in demo
- Make option text smaller with text-sm class - Rewrite dialog copy to be more original and concise - Change title from 'Do you want to expand this table?' to 'Add more rows?' - Simplify option labels: 'Create new rows' vs 'Keep current rows' - Update description to be more direct
- Replace querySelector with React refs for radio buttons - Memoize onCancel and onContinue callbacks with useCallback - Remove unused noExpandRadioRef (only need to check expandRadioRef) - Cleaner and more React-idiomatic approach
- Extract RadioItem component for reusable styled radio buttons - Add label and description structure for better clarity - Use React 19 ref pattern (no forwardRef needed) - Improve copy and spacing for better UX - Style radio buttons to match shadcn design system
- Reorganize selection functions before copy/paste for better structure - Track paste range during paste operation - Auto-select pasted cells after paste completes (matches Airtable UX) - Add TODO for bulk row creation optimization - Provides immediate visual feedback on pasted range
- Add optional onRowsAdd prop to UseDataGridProps - Prefer onRowsAdd over onRowAdd for paste operations (single API call vs multiple) - Fallback to onRowAdd if onRowsAdd is not provided (non-breaking change) - Implement onRowsAdd in demo with clear documentation - Significantly improves performance for large paste operations
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds copy/paste functionality to the data-grid component, enabling users to copy selected cells to clipboard and paste data from clipboard (with automatic type conversion and row expansion support).
Key changes:
- Added Ctrl+C/Cmd+C to copy selected cells as TSV format
- Added Ctrl+V/Cmd+V to paste clipboard data with type conversion
- Introduced paste dialog to handle cases where more rows are needed than available
- Added
onRowsAddcallback for efficient bulk row creation during paste operations
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/data-grid.ts | Defines PasteDialogState interface and adds paste-related TableMeta properties |
| src/hooks/use-data-grid.tsx | Implements copyCells/pasteCells functions, paste dialog state management, and keyboard shortcuts |
| src/components/data-grid/data-grid.tsx | Integrates DataGridPasteDialog component |
| src/components/data-grid/data-grid-paste-dialog.tsx | New dialog component for paste row expansion options |
| src/components/data-grid/data-grid-demo.tsx | Demonstrates paste functionality with onRowsAdd implementation and updates ID generation to use nanoid |
| registry.json | Adds dialog dependency and paste dialog file to registry |
| public/r/registry.json | Registry updates for public distribution |
| public/r/data-grid.json | Updates component files with new paste functionality |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add guard in getFileIcon to handle undefined type values - Add file cell handling in paste logic with JSON parsing - Fix copy logic to serialize file cells as JSON instead of [object Object] - Also serialize multi-select cells and dates properly
- Fix variable shadowing: rename local columnIds to selectedColumnIds - Add error handling for clipboard API operations - Remove duplicate PasteDialogState interface (use import from types) - Fix onRowAdd closure issue in demo to properly return new row index - Handle empty checkbox values explicitly during paste
noodleman1991
pushed a commit
to noodleman1991/tablecn
that referenced
this pull request
Mar 12, 2026
* feat: add toast notifications for cell copy operations * fix: copy focused cell when no selection exists * feat: add Airtable-style paste expansion dialog * feat: add paste dialog types to data-grid.ts * fix: correct onClick type for paste dialog cancel button * chore: lint * debug: add logging to diagnose paste expansion issue * debug: add more detailed paste loop logging * fix: use table row count instead of stale data.length after adding rows * feat: implement working paste with row expansion - Add Airtable-style paste expansion dialog - Fix onRowAdd to use functional setState for correct ID generation - Fix onDataUpdate to handle newly added rows - Add polling mechanism to wait for table state updates - Support copying focused cells and pasting with automatic row creation - Show toast notifications for copy and paste operations * feat: add enablePaste flag to control paste functionality * refactor: use faker nanoid for row creation instead of incremental IDs * fix: clear cell selections when creating a new row (Airtable behavior) * refactor: add React.memo to DataGridPasteDialog and update registry - Add React.memo with custom comparison function like other grid components - Update registry.json to include data-grid-paste-dialog component - Add dialog to registryDependencies for data-grid component - Re-enable enablePaste in demo * refactor: improve paste dialog copy and styling - Make option text smaller with text-sm class - Rewrite dialog copy to be more original and concise - Change title from 'Do you want to expand this table?' to 'Add more rows?' - Simplify option labels: 'Create new rows' vs 'Keep current rows' - Update description to be more direct * refactor: use refs and memoize callbacks in paste dialog - Replace querySelector with React refs for radio buttons - Memoize onCancel and onContinue callbacks with useCallback - Remove unused noExpandRadioRef (only need to check expandRadioRef) - Cleaner and more React-idiomatic approach * chore: rebuild registry * feat: improve paste dialog styling with radio components - Extract RadioItem component for reusable styled radio buttons - Add label and description structure for better clarity - Use React 19 ref pattern (no forwardRef needed) - Improve copy and spacing for better UX - Style radio buttons to match shadcn design system * feat: auto-select pasted cells and reorganize code - Reorganize selection functions before copy/paste for better structure - Track paste range during paste operation - Auto-select pasted cells after paste completes (matches Airtable UX) - Add TODO for bulk row creation optimization - Provides immediate visual feedback on pasted range * feat: add onRowsAdd for efficient bulk row creation - Add optional onRowsAdd prop to UseDataGridProps - Prefer onRowsAdd over onRowAdd for paste operations (single API call vs multiple) - Fallback to onRowAdd if onRowsAdd is not provided (non-breaking change) - Implement onRowsAdd in demo with clear documentation - Significantly improves performance for large paste operations * chore: rebuild registry again * chore: rebuild registry again again again * fix: file cell copy and paste functionality - Add guard in getFileIcon to handle undefined type values - Add file cell handling in paste logic with JSON parsing - Fix copy logic to serialize file cells as JSON instead of [object Object] - Also serialize multi-select cells and dates properly * refactor: address code review feedback - Fix variable shadowing: rename local columnIds to selectedColumnIds - Add error handling for clipboard API operations - Remove duplicate PasteDialogState interface (use import from types) - Fix onRowAdd closure issue in demo to properly return new row index - Handle empty checkbox values explicitly during paste
anhdd-kuro
pushed a commit
to anhdd-kuro/tablecn
that referenced
this pull request
Apr 8, 2026
* feat: add toast notifications for cell copy operations * fix: copy focused cell when no selection exists * feat: add Airtable-style paste expansion dialog * feat: add paste dialog types to data-grid.ts * fix: correct onClick type for paste dialog cancel button * chore: lint * debug: add logging to diagnose paste expansion issue * debug: add more detailed paste loop logging * fix: use table row count instead of stale data.length after adding rows * feat: implement working paste with row expansion - Add Airtable-style paste expansion dialog - Fix onRowAdd to use functional setState for correct ID generation - Fix onDataUpdate to handle newly added rows - Add polling mechanism to wait for table state updates - Support copying focused cells and pasting with automatic row creation - Show toast notifications for copy and paste operations * feat: add enablePaste flag to control paste functionality * refactor: use faker nanoid for row creation instead of incremental IDs * fix: clear cell selections when creating a new row (Airtable behavior) * refactor: add React.memo to DataGridPasteDialog and update registry - Add React.memo with custom comparison function like other grid components - Update registry.json to include data-grid-paste-dialog component - Add dialog to registryDependencies for data-grid component - Re-enable enablePaste in demo * refactor: improve paste dialog copy and styling - Make option text smaller with text-sm class - Rewrite dialog copy to be more original and concise - Change title from 'Do you want to expand this table?' to 'Add more rows?' - Simplify option labels: 'Create new rows' vs 'Keep current rows' - Update description to be more direct * refactor: use refs and memoize callbacks in paste dialog - Replace querySelector with React refs for radio buttons - Memoize onCancel and onContinue callbacks with useCallback - Remove unused noExpandRadioRef (only need to check expandRadioRef) - Cleaner and more React-idiomatic approach * chore: rebuild registry * feat: improve paste dialog styling with radio components - Extract RadioItem component for reusable styled radio buttons - Add label and description structure for better clarity - Use React 19 ref pattern (no forwardRef needed) - Improve copy and spacing for better UX - Style radio buttons to match shadcn design system * feat: auto-select pasted cells and reorganize code - Reorganize selection functions before copy/paste for better structure - Track paste range during paste operation - Auto-select pasted cells after paste completes (matches Airtable UX) - Add TODO for bulk row creation optimization - Provides immediate visual feedback on pasted range * feat: add onRowsAdd for efficient bulk row creation - Add optional onRowsAdd prop to UseDataGridProps - Prefer onRowsAdd over onRowAdd for paste operations (single API call vs multiple) - Fallback to onRowAdd if onRowsAdd is not provided (non-breaking change) - Implement onRowsAdd in demo with clear documentation - Significantly improves performance for large paste operations * chore: rebuild registry again * chore: rebuild registry again again again * fix: file cell copy and paste functionality - Add guard in getFileIcon to handle undefined type values - Add file cell handling in paste logic with JSON parsing - Fix copy logic to serialize file cells as JSON instead of [object Object] - Also serialize multi-select cells and dates properly * refactor: address code review feedback - Fix variable shadowing: rename local columnIds to selectedColumnIds - Add error handling for clipboard API operations - Remove duplicate PasteDialogState interface (use import from types) - Fix onRowAdd closure issue in demo to properly return new row index - Handle empty checkbox values explicitly during paste
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.